<template>
    <div>
        <!-- 弹出层 -->
        <a-modal title="编辑快讯" @cancel="btnCancel" @ok="btnOk" v-model:visible="showDialogComputed" width="500">
            <!-- labelCol定义 表单中左侧标题的一个宽度 -->
            <a-form>
                <a-form-item label="标题">
                    <a-input v-model:value="formData.title" placeholder="请输入标题"></a-input>
                </a-form-item>
                <a-form-item label="封面">
                    <img :src="uploadAvatarImage" style="height: 100px; width: 100px;" alt="" v-if="uploadAvatarImage">
                    <img :src="formData.image" style="height: 100px; width: 100px;" alt="" v-else>
                    <a-upload class="upload" v-model:file-list="fileList" name="file" :action="getIMAGEURL()"
                        :headers="headers" @change="handleChange">
                        <a-button style="margin-left:15px;">
                            <upload-outlined></upload-outlined>
                            上传封面
                        </a-button>
                    </a-upload>
                </a-form-item>
                <a-form-item label="类别" name="category" v-if="EditPost">
                    <a-space>
                        <a-select v-model:value="value" style="width: 120px" :options="options"
                            @change="handleChangeSelect">
                        </a-select>
                    </a-space>
                </a-form-item>
                <!-- <a-form-item label="封面" v-else>
                        <img :src="formData.image" style="height: 100px; width: 100px;" alt="">
                    </a-form-item> -->
                <a-form-item label="内容">
                    <wang-editor v-model="HTMLContent" style="height: 500px" />
                </a-form-item>
            </a-form>
        </a-modal>
</div>
</template>

<script setup lang="ts">
import { Form, message } from 'ant-design-vue'
import type { UploadChangeParam, SelectProps } from 'ant-design-vue'
import { UploadOutlined } from '@ant-design/icons-vue'
import WangEditor from '@/components/editor/WangEditor.vue'
import { getIMAGEURL } from '@/utils/getImageUrl'


const { showDialog, id, EditPost } = defineProps({
    showDialog: Boolean,
    id: Number,
    EditPost: Boolean
})

const emits = defineEmits<{
    (e: 'update:showDialog', val: Boolean): void,
    (e: 'addSuccess'): void,
}>()

const initValues = {
    title: '',
    image: '',
    content: '',
    adminId: 0
}

const HTMLContent = ref('<p>请输入内容</p>')

const formData = ref(initValues) // 声明一个响应式数据

const showDialogComputed = computed({
    get() {
        return showDialog  // 读取Props传来的值
    },
    set(val) {
        // val 是需要从父组件去入手修改 子传父
        emits('update:showDialog', val) // 告诉父组件 去修改showDialog的值
    }
})

const btnCancel = () => {
    formData.value = initValues // 清除数据 并且清除校验
}

const btnOk = async () => {
    if (!formData.value.title) return message.error('标题不能为空')
    let res = null
    if (EditPost) {
        formData.value.content = HTMLContent.value
        res = await updatedPost(id as number, { ...formData.value, category: category.value })
    } else {
        formData.value.content = HTMLContent.value
        res = await editNews(id as number, formData.value)
    }
    // 校验通知
    res.code === 201 ? message.success('编辑成功') : message.error('编辑失败'),

        btnCancel(),
        // 关闭弹层
        showDialogComputed.value = false

    // 新增成功 只是后端接口插入了一条数据- 前端并没有更新- 重新拉取数据
    // 告诉父组件
    emits('addSuccess')

}

const uploadAvatarImage = ref<string>('')

// 上传图片
const handleChange = (info: UploadChangeParam) => {
    if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
        uploadAvatarImage.value = info.file.response.data.url
        formData.value.image = uploadAvatarImage.value
    }
    if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
    }
};

const fileList = ref([]);
const headers = reactive({
    authorization: 'authorization-text',
})

watch([() => showDialog, () => id], async () => {
    if (showDialog && id) {
        if (EditPost) {
            const res = await getOnePost(id)
            formData.value.title = res.data.post.title as string
            formData.value.image = res.data.post.image as string
            HTMLContent.value = res.data.post.content as string
            category.value = res.data.post.category as number
        } else {
            const res = await getOneNews(id as number)
            formData.value = res.data.news
            HTMLContent.value = res.data.news.content as string
        }
    }
})

const category = ref(0)


// 0考研专区 1就业专区 2校园活动
// 选择器 
const options = ref<SelectProps['options']>([
    {
        value: 0,
        label: '考研专区',
    },
    {
        value: 1,
        label: '就业专区',
    },
    {
        value: 2,
        label: '校园活动',
    },
])

const handleChangeSelect: SelectProps['onChange'] = value => {
    // console.log(value)
    category.value = Number(value)
}

// const categoryNumber = ref(0)
const value = ref({ value: category })
</script>
